<template>
  <div class="industry-data-form">
    <dv-border-box-12 class="tech-header-box">
      <div class="tech-header">
        <h2 class="tech-title">{{ isEdit ? '编辑行业数据' : '新增行业数据' }}</h2>
        <el-button type="primary" class="tech-button tech-button--primary" @click="goBack">
          <el-icon><Back /></el-icon>返回列表
        </el-button>
      </div>
    </dv-border-box-12>

    <dv-border-box-8 class="tech-form-box">
      <el-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        label-width="120px"
        class="tech-form"
        v-loading="loading"
        element-loading-text="数据加载中..."
          element-loading-background="rgba(0, 20, 40, 0.8)"
      >
        <!-- 行业图标 -->
        <el-form-item label="行业图标" prop="industryIcon">
          <div class="upload-container">
            <el-upload
              class="icon-uploader"
              :action="uploadAction"
              :show-file-list="false"
              :on-success="handleIconSuccess"
              :before-upload="beforeIconUpload"
              :http-request="customUploadIcon"
            >
              <el-image
                v-if="formData.industryIcon"
                :src="iconPreviewUrl"
                class="uploaded-icon"
                fit="contain"
              />
              <div v-else class="upload-placeholder">
                <el-icon><Plus /></el-icon>
                <span>点击上传图标</span>
              </div>
            </el-upload>
            <div v-if="iconUploading" class="upload-progress">
              <el-progress :percentage="uploadProgress" />
            </div>
          </div>
          <div class="upload-tip">支持 jpg/png 格式，建议尺寸 200x200px</div>
        </el-form-item>

        <!-- 行业名称 -->
        <el-form-item label="行业名称" prop="industryName">
          <el-input v-model="formData.industryName" placeholder="请输入行业名称" class="datav-input" />
        </el-form-item>
        
        <!-- 启用状态 -->
        <el-form-item label="启用状态">
          <el-switch
            v-model="formData.enable"
            active-text="开启"
            inactive-text="关闭"
            class="tech-switch"
            active-color="#00c0ff"
            inactive-color="#666"
          />
          <div class="switch-tip">控制该行业数据是否在前端展示</div>
        </el-form-item>

        <!-- 职位列表 -->
        <el-form-item label="职位列表" prop="positions">
          <div class="positions-container">
            <div
              v-for="(position, index) in formData.positions"
              :key="index"
              class="position-item-form"
            >
              <div class="position-inputs">
                <el-input
                  v-model="position.title"
                  placeholder="职位名称"
                  class="position-title datav-input"
                />
                <el-input
                  v-model="position.description"
                  placeholder="职位描述"
                  class="position-desc datav-input"
                />
              </div>
              <el-button
                type="danger"
                circle
                class="remove-btn"
                @click="removePosition(index)"
              >
                <el-icon><Delete /></el-icon>
              </el-button>
            </div>
            <el-button
              type="primary"
              class="tech-button tech-button--primary add-btn"
              @click="addPosition"
            >
              <el-icon><Plus /></el-icon>添加职位
            </el-button>
          </div>
        </el-form-item>

        <!-- 简历建议 -->
        <el-form-item label="简历建议" prop="resumeTips">
          <el-tag
            v-for="(tag, index) in formData.resumeTips"
            :key="index"
            closable
            class="resume-tip-tag"
            @close="removeTag(index)"
          >
            {{ tag }}
          </el-tag>
          <el-input
            v-if="inputVisible"
            ref="tagInputRef"
            v-model="inputValue"
            class="tag-input"
            size="small"
            @keyup.enter="handleInputConfirm"
            @blur="handleInputConfirm"
          />
          <el-button
            v-else
            class="tech-button tech-button--primary button-new-tag"
            size="small"
            @click="showInput"
          >
            <el-icon><Plus /></el-icon>添加标签
          </el-button>
        </el-form-item>

        <!-- 成功案例 -->
        <el-form-item label="成功案例" prop="successCases">
          <div class="cases-container">
            <div
              v-for="(caseItem, index) in formData.successCases"
              :key="index"
              class="case-item"
            >
              <dv-border-box-3 class="case-box">
                <div class="case-header">
                  <h4>案例 {{ index + 1 }}</h4>
                  <el-button
                    type="danger"
                    circle
                    size="small"
                    @click="removeCase(index)"
                  >
                    <el-icon><Delete /></el-icon>
                  </el-button>
                </div>
                
                <div class="case-form-grid">
                  <el-form-item
                    :prop="`successCases.${index}.name`"
                    :rules="{ required: true, message: '请输入案例名称', trigger: 'blur' }"
                    label="案例名称"
                  >
                    <el-input v-model="caseItem.name" placeholder="请输入案例名称" class="datav-input" />
                  </el-form-item>
                  
                  <el-form-item
                    :prop="`successCases.${index}.feedback`"
                    :rules="{ required: true, message: '请输入反馈内容', trigger: 'blur' }"
                    label="反馈内容"
                  >
                    <el-input
                      v-model="caseItem.feedback"
                      type="textarea"
                      placeholder="请输入反馈内容"
                      class="datav-input"
                      :rows="3"
                    />
                  </el-form-item>
                  
                  <el-form-item
                    :prop="`successCases.${index}.before`"
                    :rules="{ required: true, message: '请输入优化前简历', trigger: 'blur' }"
                    label="优化前简历"
                  >
                    <el-input v-model="caseItem.before" placeholder="请输入优化前简历" class="datav-input" />
                  </el-form-item>
                  
                  <el-form-item
                    :prop="`successCases.${index}.after`"
                    :rules="{ required: true, message: '请输入优化后简历', trigger: 'blur' }"
                    label="优化后简历"
                  >
                    <el-input v-model="caseItem.after" placeholder="请输入优化后简历" class="datav-input" />
                  </el-form-item>
                </div>
              </dv-border-box-3>
            </div>
            
            <el-button
              type="primary"
              class="tech-button tech-button--primary add-btn"
              @click="addCase"
            >
              <el-icon><Plus /></el-icon>添加案例
            </el-button>
          </div>
        </el-form-item>

        <!-- 表单操作按钮 -->
        <el-form-item>
          <el-button
            type="primary"
            class="tech-button tech-button--primary"
            @click="submitForm"
            :loading="submitting"
          >
            <el-icon><Check /></el-icon>保存
          </el-button>
          <el-button class="tech-button" @click="goBack">
            <el-icon><Close /></el-icon>取消
          </el-button>
        </el-form-item>
      </el-form>
    </dv-border-box-8>
  </div>
</template>

<script>
import { ref, reactive, computed, nextTick, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  Plus, Delete, Back, Check, Close, Upload 
} from '@element-plus/icons-vue'
import { app, ensureLogin } from '../../utils/cloudbase'
import dayjs from 'dayjs'

export default {
  name: 'IndustryDataForm',
  components: {
    Plus,
    Delete,
    Back,
    Check,
    Close,
    Upload
  },
  props: {
    id: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const router = useRouter()
    const route = useRoute()
    const formRef = ref(null)
    const loading = ref(false)
    const submitting = ref(false)
    const iconUploading = ref(false)
    const uploadProgress = ref(0)
    
    // 标签输入相关
    const inputVisible = ref(false)
    const inputValue = ref('')
    const tagInputRef = ref(null)
    
    // 上传文件相关
    const uploadAction = '#'
    const fileListMap = reactive({
      before: {},
      after: {}
    })
    
    // 表单数据
    const formData = reactive({
      _id: '',
      industryIcon: '',
      industryName: '',
      positions: [],
      resumeTips: [],
      successCases: [],
      uuid: '',
      enable: true // 添加启用状态，默认为true
    })
    
    // 表单验证规则
    const rules = {
      industryIcon: [
        { required: true, message: '请上传行业图标', trigger: 'change' }
      ],
      industryName: [
        { required: true, message: '请输入行业名称', trigger: 'blur' }
      ],
      positions: [
        { 
          type: 'array', 
          required: true, 
          message: '请至少添加一个职位', 
          trigger: 'change',
          validator: (rule, value, callback) => {
            if (value.length === 0) {
              callback(new Error('请至少添加一个职位'))
            } else {
              const invalid = value.some(item => !item.title || !item.description)
              if (invalid) {
                callback(new Error('职位名称和描述不能为空'))
              } else {
                callback()
              }
            }
          }
        }
      ],
      resumeTips: [
        { 
          type: 'array', 
          required: true, 
          message: '请至少添加一个简历建议', 
          trigger: 'change',
          validator: (rule, value, callback) => {
            if (value.length === 0) {
              callback(new Error('请至少添加一个简历建议'))
            } else {
              callback()
            }
          }
        }
      ],
      successCases: [
        { 
          type: 'array', 
          required: true, 
          message: '请至少添加一个成功案例', 
          trigger: 'change',
          validator: (rule, value, callback) => {
            if (value.length === 0) {
              callback(new Error('请至少添加一个成功案例'))
            } else {
              callback()
            }
          }
        }
      ]
    }
    
    // 计算属性：是否为编辑模式
    const isEdit = computed(() => {
      return !!props.id || !!route.params.id
    })
    
    // 计算属性：图标预览URL
    const iconPreviewUrl = ref('')
    
    // 监听图标变化，获取预览URL
    watch(() => formData.industryIcon, async (newVal) => {
      if (newVal) {
        if (newVal.startsWith('cloud://')) {
          try {
            const tempFileRes = await app.getTempFileURL({
              fileList: [newVal]
            })
            
            if (tempFileRes.fileList && tempFileRes.fileList[0]) {
              iconPreviewUrl.value = tempFileRes.fileList[0].tempFileURL
            }
          } catch (error) {
            console.error('获取图标预览URL失败:', error)
          }
        } else {
          // 如果不是云存储路径，可能是临时URL或base64，直接使用
          iconPreviewUrl.value = newVal
        }
      } else {
        iconPreviewUrl.value = ''
      }
    }, { immediate: true })
    
    // 获取行业数据详情
    const fetchIndustryDetail = async () => {
      const id = props.id || route.params.id
      if (!id) return
      
      loading.value = true
      try {
        await ensureLogin()
        
        const res = await app.callFunction({
          name: 'admin-industry-data-crud',
          data: {
            action: 'read',
            data: { _id: id }
          }
        })
        
        const result = res.result || {}
        
        if (result.code === 0 && result.data) {
          const data = result.data
          
          // 填充表单数据
          formData._id = data._id || ''
          formData.industryIcon = data.industryIcon || ''
          formData.industryName = data.industryName || ''
          formData.positions = Array.isArray(data.positions) ? [...data.positions] : []
          formData.resumeTips = Array.isArray(data.resumeTips) ? [...data.resumeTips] : []
          formData.successCases = Array.isArray(data.successCases) ? [...data.successCases] : []
          formData.uuid = data.uuid || ''
          formData.enable = data.enable !== false // 默认为true
          
          // 处理文件列表
          if (data.successCases && data.successCases.length > 0) {
            data.successCases.forEach((caseItem, index) => {
              if (caseItem.before) {
                fileListMap.before[index] = [{ name: '优化前简历', url: caseItem.before }]
              }
              if (caseItem.after) {
                fileListMap.after[index] = [{ name: '优化后简历', url: caseItem.after }]
              }
            })
          }
        } else {
          ElMessage.error(result.message || '获取行业数据详情失败')
        }
      } catch (error) {
        console.error('获取行业数据详情出错:', error)
        ElMessage.error('获取行业数据详情出错: ' + error.message)
      } finally {
        loading.value = false
      }
    }
    
    // 添加职位
    const addPosition = () => {
      formData.positions.push({
        title: '',
        description: ''
      })
    }
    
    // 移除职位
    const removePosition = (index) => {
      formData.positions.splice(index, 1)
    }
    
    // 显示标签输入框
    const showInput = () => {
      inputVisible.value = true
      nextTick(() => {
        tagInputRef.value.focus()
      })
    }
    
    // 处理标签输入确认
    const handleInputConfirm = () => {
      if (inputValue.value) {
        formData.resumeTips.push(inputValue.value)
      }
      inputVisible.value = false
      inputValue.value = ''
    }
    
    // 移除标签
    const removeTag = (index) => {
      formData.resumeTips.splice(index, 1)
    }
    
    // 添加案例
    const addCase = () => {
      formData.successCases.push({
        name: '',
        feedback: '',
        before: '',
        after: ''
      })
    }
    
    // 移除案例
    const removeCase = (index) => {
      formData.successCases.splice(index, 1)
      // 清理文件列表
      delete fileListMap.before[index]
      delete fileListMap.after[index]
    }
    
    // 图标上传前的校验
    const beforeIconUpload = (file) => {
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
      
      if (!isJPG && !isPNG) {
        ElMessage.error('图标只能是 JPG 或 PNG 格式!')
        return false
      }
      if (!isLt2M) {
        ElMessage.error('图标大小不能超过 2MB!')
        return false
      }
      return true
    }
    
    // 简历上传前的校验
    const beforeResumeUpload = (file) => {
      const isDOCX = file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
      const isPDF = file.type === 'application/pdf'
      const isLt10M = file.size / 1024 / 1024 < 10
      
      if (!isDOCX && !isPDF) {
        ElMessage.error('简历只能是 DOCX 或 PDF 格式!')
        return false
      }
      if (!isLt10M) {
        ElMessage.error('简历大小不能超过 10MB!')
        return false
      }
      return true
    }
    
    // 自定义图标上传
    const customUploadIcon = async (options) => {
      const { file } = options
      if (!beforeIconUpload(file)) return
      
      iconUploading.value = true
      uploadProgress.value = 0
      
      try {
        await ensureLogin()
        
        // 生成文件路径
        const date = dayjs()
        const datePath = date.format('YYYYMMDD')
        const timePath = date.format('HHmmss')
        
        // 转换为Base64
        const reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = async (e) => {
          const base64Content = e.target.result.split(',')[1]
          
          try {
            const result = await app.callFunction({
              name: 'admin-file-upload',
              data: {
                fileContent: base64Content,
                fileName: file.name,
                folder: `image/${datePath}/${timePath}`
              }
            })
            
            if (result.result.code === 0) {
              formData.industryIcon = result.result.data.fileId
              iconPreviewUrl.value = result.result.data.fileUrl
              ElMessage.success('图标上传成功')
            } else {
              ElMessage.error(result.result.message || '图标上传失败')
            }
          } catch (error) {
            console.error('图标上传失败:', error)
            ElMessage.error('图标上传失败: ' + error.message)
          } finally {
            iconUploading.value = false
          }
        }
      } catch (error) {
        console.error('图标读取失败:', error)
        ElMessage.error('图标读取失败: ' + error.message)
        iconUploading.value = false
      }
    }
    
    // 处理图标上传成功
    const handleIconSuccess = (res) => {
      // 自定义上传已处理，此处为兼容接口
    }
    
    // 自定义简历上传
    const customUploadResume = async (options, index, type) => {
      const { file } = options
      if (!beforeResumeUpload(file)) return
      
      try {
        await ensureLogin()
        
        // 生成文件路径
        const date = dayjs()
        const datePath = date.format('YYYYMMDD')
        const timePath = date.format('HHmmss')
        const fileExt = file.name.substring(file.name.lastIndexOf('.'))
        const cloudPath = `resumeAuto/${datePath}/${timePath}${fileExt}`
        
        // 上传文件
        const res = await app.uploadFile({
          cloudPath,
          filePath: file
        })
        
        if (res.fileID) {
          // 获取文件临时访问链接
          const tempFileRes = await app.getTempFileURL({
            fileList: [res.fileID]
          })
          
          if (tempFileRes.fileList && tempFileRes.fileList[0]) {
            // 更新表单数据
            formData.successCases[index][type] = res.fileID
            
            // 更新文件列表
            if (!fileListMap[type][index]) {
              fileListMap[type][index] = []
            }
            fileListMap[type][index] = [{
              name: file.name,
              url: tempFileRes.fileList[0].tempFileURL
            }]
            
            ElMessage.success('简历上传成功')
          } else {
            ElMessage.error('获取简历访问链接失败')
          }
        } else {
          ElMessage.error('简历上传失败')
        }
      } catch (error) {
        console.error('简历上传出错:', error)
        ElMessage.error('简历上传出错: ' + error.message)
      }
    }
    
    // 处理简历上传成功
    const handleResumeSuccess = (res, index, type) => {
      // 自定义上传已处理，此处为兼容接口
    }
    
    // 获取文件列表
    const getFileList = (fileId, type) => {
      if (!fileId) return []
      
      const index = formData.successCases.findIndex(item => {
        return (type === 'before' && item.before === fileId) || 
               (type === 'after' && item.after === fileId)
      })
      
      // 如果有缓存的文件列表，直接返回
      if (fileListMap[type][index]) {
        return fileListMap[type][index]
      }
      
      // 否则返回空数组，文件列表会在组件挂载时通过 fetchIndustryDetail 方法获取
      return []
    }
    
    // 初始化文件预览
    const initFilePreview = async () => {
      // 处理图标预览
      if (formData.industryIcon && formData.industryIcon.startsWith('cloud://')) {
        try {
          const tempFileRes = await app.getTempFileURL({
            fileList: [formData.industryIcon]
          })
          
          if (tempFileRes.fileList && tempFileRes.fileList[0]) {
            iconPreviewUrl.value = tempFileRes.fileList[0].tempFileURL
          }
        } catch (error) {
          console.error('获取图标预览URL失败:', error)
        }
      } else {
        iconPreviewUrl.value = formData.industryIcon
      }
      
      // 处理简历文件预览
      if (formData.successCases && formData.successCases.length > 0) {
        const fileIds = []
        const fileMapping = {}
        
        // 收集所有需要获取URL的文件ID
        formData.successCases.forEach((caseItem, index) => {
          if (caseItem.before && caseItem.before.startsWith('cloud://')) {
            fileIds.push(caseItem.before)
            fileMapping[caseItem.before] = { index, type: 'before' }
          }
          if (caseItem.after && caseItem.after.startsWith('cloud://')) {
            fileIds.push(caseItem.after)
            fileMapping[caseItem.after] = { index, type: 'after' }
          }
        })
        
        // 批量获取文件URL
        if (fileIds.length > 0) {
          try {
            const tempFileRes = await app.getTempFileURL({
              fileList: fileIds
            })
            
            if (tempFileRes.fileList && tempFileRes.fileList.length > 0) {
              tempFileRes.fileList.forEach(file => {
                const mapping = fileMapping[file.fileID]
                if (mapping) {
                  const { index, type } = mapping
                  if (!fileListMap[type][index]) {
                    fileListMap[type][index] = []
                  }
                  fileListMap[type][index] = [{
                    name: type === 'before' ? '优化前简历' : '优化后简历',
                    url: file.tempFileURL
                  }]
                }
              })
            }
          } catch (error) {
            console.error('批量获取文件预览URL失败:', error)
          }
        }
      }
    }
    
    // 提交表单
    const submitForm = async () => {
      if (!formRef.value) return
      
      await formRef.value.validate(async (valid, fields) => {
        if (!valid) {
          console.error('表单验证失败:', fields)
          return
        }
        
        submitting.value = true
        try {
          await ensureLogin()
          
          // 准备提交数据
          const submitData = {
            industryIcon: formData.industryIcon,
            industryName: formData.industryName,
            positions: formData.positions,
            resumeTips: formData.resumeTips,
            successCases: formData.successCases,
            enable: formData.enable
          }
          
          // 编辑模式需要传入ID
          if (isEdit.value) {
            submitData._id = formData._id
          }
          
          // 调用云函数
          const res = await app.callFunction({
            name: 'admin-industry-data-crud',
            data: {
              action: isEdit.value ? 'update' : 'create',
              data: submitData
            }
          })
          
          const result = res.result || {}
          
          if (result.code === 0) {
            ElMessage.success(isEdit.value ? '更新成功' : '添加成功')
            goBack()
          } else {
            ElMessage.error(result.message || (isEdit.value ? '更新失败' : '添加失败'))
          }
        } catch (error) {
          console.error('提交表单出错:', error)
          ElMessage.error('提交表单出错: ' + error.message)
        } finally {
          submitting.value = false
        }
      })
    }
    
    // 返回列表页
    const goBack = () => {
      router.push('/industry-data')
    }
    
    // 组件挂载时获取数据
    onMounted(() => {
      // 初始化表单
      if (formData.positions.length === 0) {
        addPosition()
      }
      if (formData.successCases.length === 0) {
        addCase()
      }
      
      // 编辑模式下获取详情
      if (isEdit.value) {
        fetchIndustryDetail().then(() => {
          // 获取详情后初始化文件预览
          initFilePreview()
        })
      }
    })
    
    return {
      formRef,
      formData,
      rules,
      loading,
      submitting,
      isEdit,
      iconUploading,
      uploadProgress,
      uploadAction,
      inputVisible,
      inputValue,
      tagInputRef,
      iconPreviewUrl,
      addPosition,
      removePosition,
      showInput,
      handleInputConfirm,
      removeTag,
      addCase,
      removeCase,
      beforeIconUpload,
      beforeResumeUpload,
      customUploadIcon,
      handleIconSuccess,
      customUploadResume,
      handleResumeSuccess,
      getFileList,
      initFilePreview,
      submitForm,
      goBack
    }
  }
}
</script>

<style>
/* 全局样式覆盖 */
.el-input__wrapper {
  background-color: rgba(0, 30, 60, 0.6) !important;
  border: 1px solid rgba(0, 192, 255, 0.5) !important;
  box-shadow: none !important;
}

.el-input__inner {
  color: #ffffff !important;
}

.el-textarea__inner {
  background-color: rgba(0, 30, 60, 0.6) !important;
  border: 1px solid rgba(0, 192, 255, 0.5) !important;
  color: #ffffff !important;
}

.el-form-item__label {
  color: #00c0ff !important;
}
</style>

<style scoped>
.industry-data-form {
  padding: 0;
}

.tech-form-box {
  margin-top: 20px;
  padding: 20px;
}

.tech-form {
  max-width: 1000px;
  margin: 0 auto;
}

.upload-container {
  display: flex;
  align-items: center;
}

.icon-uploader {
  margin-right: 20px;
}

.uploaded-icon {
  width: 100px;
  height: 100px;
  border: 2px solid rgba(0, 192, 255, 0.5);
  border-radius: 4px;
  box-shadow: 0 0 15px rgba(0, 192, 255, 0.3);
  transition: all 0.3s;
}

.uploaded-icon:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(0, 192, 255, 0.5);
}

.upload-placeholder {
  width: 100px;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 2px dashed rgba(0, 192, 255, 0.5);
  border-radius: 4px;
  background-color: rgba(0, 30, 60, 0.4);
  color: #00c0ff;
  transition: all 0.3s;
}

.upload-placeholder:hover {
  border-color: rgba(0, 192, 255, 0.8);
  background-color: rgba(0, 30, 60, 0.6);
  cursor: pointer;
}

.upload-placeholder .el-icon {
  font-size: 24px;
  margin-bottom: 8px;
}

.upload-progress {
  width: 200px;
}

.upload-tip {
  font-size: 12px;
  color: rgba(0, 192, 255, 0.8);
  margin-top: 5px;
}

.positions-container {
  width: 100%;
}

.position-item-form {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 4px;
  background-color: rgba(0, 30, 60, 0.4);
  border: 1px solid rgba(0, 192, 255, 0.3);
}

.position-inputs {
  display: flex;
  flex: 1;
  gap: 10px;
}

.position-title {
  width: 200px;
}

.position-desc {
  flex: 1;
}

.remove-btn {
  margin-left: 10px;
}

.add-btn {
  margin-top: 10px;
}

.resume-tip-tag {
  margin-right: 8px;
  margin-bottom: 8px;
  background-color: rgba(0, 30, 60, 0.6);
  border-color: rgba(0, 192, 255, 0.5);
  color: #ffffff;
}

.tag-input {
  width: 100px;
  margin-right: 8px;
  vertical-align: bottom;
}

.button-new-tag {
  margin-top: 8px;
}

.cases-container {
  width: 100%;
}

.case-item {
  margin-bottom: 20px;
}

.case-box {
  padding: 20px;
}

.case-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.case-header h4 {
  margin: 0;
  color: #00c0ff;
  text-shadow: 0 0 5px rgba(0, 192, 255, 0.5);
}

.resume-upload {
  width: 100%;
}

.tech-switch {
  --el-switch-on-color: #00c0ff;
  --el-switch-off-color: rgba(0, 30, 60, 0.6);
}

.switch-tip {
  font-size: 12px;
  color: rgba(0, 192, 255, 0.8);
  margin-top: 5px;
}

/* 新增样式 */
.case-form-grid {
  display: grid;
  grid-gap: 15px;
}

:deep(.datav-input .el-input__wrapper) {
  background-color: rgba(0, 30, 60, 0.6) !important;
  border: 1px solid rgba(0, 192, 255, 0.5) !important;
  box-shadow: 0 0 0 1px rgba(0, 192, 255, 0.5) inset !important;
}

:deep(.datav-input .el-input__inner) {
  color: #ffffff !important;
}

:deep(.datav-input .el-textarea__inner) {
  background-color: rgba(0, 30, 60, 0.6) !important;
  border: 1px solid rgba(0, 192, 255, 0.5) !important;
  color: #ffffff !important;
}

:deep(.el-button.tech-button--primary) {
  background-color: rgba(0, 192, 255, 0.2) !important;
  border-color: rgba(0, 192, 255, 0.7) !important;
  color: #00c0ff !important;
}

:deep(.el-button.tech-button--primary:hover) {
  background-color: rgba(0, 192, 255, 0.4) !important;
  border-color: #00c0ff !important;
  color: #ffffff !important;
  box-shadow: 0 0 10px rgba(0, 192, 255, 0.5) !important;
}

:deep(.el-button.tech-button) {
  background-color: rgba(0, 30, 60, 0.6) !important;
  border-color: rgba(0, 192, 255, 0.3) !important;
  color: rgba(0, 192, 255, 0.8) !important;
}

:deep(.el-button.tech-button:hover) {
  background-color: rgba(0, 30, 60, 0.8) !important;
  border-color: rgba(0, 192, 255, 0.7) !important;
  color: #ffffff !important;
}
</style>
